<template>
  <div class="sales-purchase-stats-page">
    <!-- 页面标题头部 -->
    <div class="page-header">
      <div class="page-title">销售购买金额统计</div>
      <div class="page-subtitle">统计销售和购买的金额数据，支持多维度分析</div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stats-card">
            <div class="stats-content">
              <div class="stats-number">¥{{ formatAmount(computedStats.totalSales) }}</div>
              <div class="stats-label">总销售金额</div>
              <div class="stats-trend" :class="{ 'up': computedStats.salesTrend > 0, 'down': computedStats.salesTrend < 0 }">
                <i :class="computedStats.salesTrend > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                {{ Math.abs(computedStats.salesTrend) }}%
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stats-card">
            <div class="stats-content">
              <div class="stats-number">¥{{ formatAmount(computedStats.totalPurchase) }}</div>
              <div class="stats-label">总购买金额</div>
              <div class="stats-trend" :class="{ 'up': computedStats.purchaseTrend > 0, 'down': computedStats.purchaseTrend < 0 }">
                <i :class="computedStats.purchaseTrend > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                {{ Math.abs(computedStats.purchaseTrend) }}%
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stats-card">
            <div class="stats-content">
              <div class="stats-number">¥{{ formatAmount(computedStats.netProfit) }}</div>
              <div class="stats-label">净利润</div>
              <div class="stats-trend" :class="{ 'up': computedStats.profitTrend > 0, 'down': computedStats.profitTrend < 0 }">
                <i :class="computedStats.profitTrend > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                {{ Math.abs(computedStats.profitTrend) }}%
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stats-card">
            <div class="stats-content">
              <div class="stats-number">{{ computedStats.totalOrders }}</div>
              <div class="stats-label">总订单数</div>
              <div class="stats-trend" :class="{ 'up': computedStats.orderTrend > 0, 'down': computedStats.orderTrend < 0 }">
                <i :class="computedStats.orderTrend > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                {{ Math.abs(computedStats.orderTrend) }}%
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表展示 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <span>销售趋势图</span>
            <el-select v-model="salesChartType" size="small" @change="updateSalesChart">
              <el-option label="按日" value="daily"></el-option>
              <el-option label="按月" value="monthly"></el-option>
              <el-option label="按年" value="yearly"></el-option>
            </el-select>
          </div>
          <div class="chart-container">
            <div ref="salesChart" class="chart"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <span>购买趋势图</span>
            <el-select v-model="purchaseChartType" size="small" @change="updatePurchaseChart">
              <el-option label="按日" value="daily"></el-option>
              <el-option label="按月" value="monthly"></el-option>
              <el-option label="按年" value="yearly"></el-option>
            </el-select>
          </div>
          <div class="chart-container">
            <div ref="purchaseChart" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 搜索和筛选 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="handleDateChange"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="searchForm.type" placeholder="选择类型" clearable @change="handleTypeChange">
            <el-option label="全部" value=""></el-option>
            <el-option label="销售" value="sales"></el-option>
            <el-option label="购买" value="purchase"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="选择状态" clearable @change="handleStatusChange">
            <el-option label="全部" value=""></el-option>
            <el-option label="已付款" value="paid"></el-option>
            <el-option label="已完成" value="completed"></el-option>
            <el-option label="进行中" value="processing"></el-option>
            <el-option label="已取消" value="cancelled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词">
          <el-input v-model="searchForm.keyword" placeholder="订单号/商品标题" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="success" @click="handleExport">导出数据</el-button>
        </el-form-item>
      </el-form>
      
      <!-- 当前筛选状态显示 -->
      <div class="filter-status" v-if="hasActiveFilters">
        <el-tag 
          v-if="searchForm.dateRange && searchForm.dateRange.length === 2" 
          type="primary"
          closable
          @close="clearDateFilter"
        >
          时间: {{ searchForm.dateRange[0] }} 至 {{ searchForm.dateRange[1] }}
        </el-tag>
        <el-tag 
          v-if="searchForm.type" 
          :type="getTypeTagType(searchForm.type)"
          closable
          @close="clearTypeFilter"
        >
          {{ getTypeText(searchForm.type) }}
        </el-tag>
        <el-tag 
          v-if="searchForm.status" 
          :type="getStatusTagType(searchForm.status)"
          closable
          @close="clearStatusFilter"
        >
          {{ getStatusText(searchForm.status) }}
        </el-tag>
        <el-tag 
          v-if="searchForm.keyword" 
          type="info"
          closable
          @close="clearKeywordFilter"
        >
          关键词: {{ searchForm.keyword }}
        </el-tag>
      </div>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <div class="table-header">
        <div class="table-title">
          交易记录列表
          <span class="record-count" v-if="hasActiveFilters">
            ({{ filteredRecordCount }}条)
          </span>
        </div>
        <div class="table-actions">
          <el-button 
            type="primary" 
            @click="handleRefresh" 
            :loading="loading"
          >
            <i class="el-icon-refresh"></i> 刷新
          </el-button>
        </div>
      </div>

      <el-table
        :data="filteredRecords"
        v-loading="loading"
        stripe
        border
        class="data-table"
        @sort-change="handleSortChange"
      >
        <el-table-column prop="id" label="ID" width="80" sortable="custom"></el-table-column>
        <el-table-column prop="order_no" label="订单号" width="180"></el-table-column>
        <el-table-column prop="type" label="类型" width="100">
          <template slot-scope="scope">
            <el-tag :type="getTypeTagType(scope.row.type)">
              {{ getTypeText(scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额" width="120" sortable="custom">
          <template slot-scope="scope">
            <span class="amount-text" :class="scope.row.type === 'sales' ? 'sales' : 'purchase'">
              {{ scope.row.type === 'sales' ? '+' : '-' }}¥{{ formatAmount(scope.row.amount) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品标题" min-width="200"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" sortable="custom">
          <template slot-scope="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="160" sortable="custom">
          <template slot-scope="scope">
            {{ formatDateTime(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button 
              type="text" 
              size="small" 
              @click="handleViewDetail(scope.row)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      title="交易详情"
      :visible.sync="detailDialogVisible"
      width="600px"
      :before-close="handleCloseDetail"
    >
      <div v-if="selectedRecord" class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号">{{ selectedRecord.order_no }}</el-descriptions-item>
          <el-descriptions-item label="类型">
            <el-tag :type="getTypeTagType(selectedRecord.type)">
              {{ getTypeText(selectedRecord.type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="金额">
            <span class="amount-text" :class="selectedRecord.type === 'sales' ? 'sales' : 'purchase'">
              {{ selectedRecord.type === 'sales' ? '+' : '-' }}¥{{ formatAmount(selectedRecord.amount) }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusTagType(selectedRecord.status)">
              {{ getStatusText(selectedRecord.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="商品标题" :span="2">{{ selectedRecord.title }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatDateTime(selectedRecord.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ formatDateTime(selectedRecord.updateTime) }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Line } from '@antv/g2plot'
import { 
  getSalesPurchaseStats, 
  getSalesPurchaseRecords, 
  getSalesTrend, 
  getPurchaseTrend,
  exportSalesPurchaseStats 
} from '@/api/sales-purchase-stats'

export default {
  name: 'SalesPurchaseStats',
  data() {
    return {
      // 搜索表单
      searchForm: {
        dateRange: [],
        type: '',
        status: '',
        keyword: ''
      },
      
      // 图表类型
      salesChartType: 'daily',
      purchaseChartType: 'daily',
      
      // 图表实例
      salesChart: null,
      purchaseChart: null,
      
      // 数据
      records: [],
      loading: false,
      
      // 分页
      pagination: {
        current: 1,
        size: 20,
        total: 0
      },
      
      // 排序
      sortBy: '',
      sortOrder: '',
      
      // 详情对话框
      detailDialogVisible: false,
      selectedRecord: null,
      
      // 统计数据
      stats: {
        totalSales: 0,
        totalPurchase: 0,
        netProfit: 0,
        totalOrders: 0,
        salesTrend: 0,
        purchaseTrend: 0,
        profitTrend: 0,
        orderTrend: 0
      }
    }
  },
  
  computed: {
    // 计算后的统计数据
    computedStats() {
      return this.stats
    },
    
    // 过滤后的记录
    filteredRecords() {
      let filtered = [...this.records]
      
      // 关键词过滤
      if (this.searchForm.keyword) {
        const keyword = this.searchForm.keyword.toLowerCase()
        filtered = filtered.filter(record => 
          record.orderNo.toLowerCase().includes(keyword) ||
          record.title.toLowerCase().includes(keyword)
        )
      }
      
      // 类型过滤
      if (this.searchForm.type) {
        filtered = filtered.filter(record => record.type === this.searchForm.type)
      }
      
      // 状态过滤
      if (this.searchForm.status) {
        filtered = filtered.filter(record => record.status === this.searchForm.status)
      }
      
      // 日期过滤
      if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
        const startDate = new Date(this.searchForm.dateRange[0])
        const endDate = new Date(this.searchForm.dateRange[1])
        endDate.setHours(23, 59, 59, 999)
        
        filtered = filtered.filter(record => {
          const recordDate = new Date(record.createTime)
          return recordDate >= startDate && recordDate <= endDate
        })
      }
      
      // 排序
      if (this.sortBy) {
        filtered.sort((a, b) => {
          let aVal = a[this.sortBy]
          let bVal = b[this.sortBy]
          
          if (typeof aVal === 'string') {
            aVal = aVal.toLowerCase()
            bVal = bVal.toLowerCase()
          }
          
          if (this.sortOrder === 'ascending') {
            return aVal > bVal ? 1 : -1
          } else {
            return aVal < bVal ? 1 : -1
          }
        })
      }
      
      return filtered
    },
    
    // 过滤后的记录数量
    filteredRecordCount() {
      return this.filteredRecords.length
    },
    
    // 是否有活跃的筛选条件
    hasActiveFilters() {
      return (this.searchForm.dateRange && this.searchForm.dateRange.length > 0) ||
             this.searchForm.type ||
             this.searchForm.status ||
             this.searchForm.keyword
    }
  },
  
  mounted() {
    this.initCharts()
    this.loadData()
  },
  
  beforeDestroy() {
    if (this.salesChart) {
      this.salesChart.destroy()
    }
    if (this.purchaseChart) {
      this.purchaseChart.destroy()
    }
  },
  
  methods: {
    // 初始化图表
    initCharts() {
      this.$nextTick(() => {
        this.initSalesChart()
        this.initPurchaseChart()
      })
    },
    
    // 初始化销售图表
    initSalesChart() {
      const chartDom = this.$refs.salesChart
      if (chartDom) {
        this.salesChart = new Line(chartDom, {
          data: [],
          xField: 'date',
          yField: 'value',
          seriesField: 'type',
          smooth: true,
          animation: {
            appear: {
              animation: 'path-in',
              duration: 1000,
            },
          },
        })
        this.updateSalesChart()
      }
    },
    
    // 初始化购买图表
    initPurchaseChart() {
      const chartDom = this.$refs.purchaseChart
      if (chartDom) {
        this.purchaseChart = new Line(chartDom, {
          data: [],
          xField: 'date',
          yField: 'value',
          seriesField: 'type',
          smooth: true,
          animation: {
            appear: {
              animation: 'path-in',
              duration: 1000,
            },
          },
        })
        this.updatePurchaseChart()
      }
    },
    
    // 更新销售图表
    async updateSalesChart() {
      if (!this.salesChart) return
      
      try {
        const response = await getSalesTrend({
          type: this.salesChartType,
          startDate: this.searchForm.dateRange && this.searchForm.dateRange[0],
          endDate: this.searchForm.dateRange && this.searchForm.dateRange[1]
        })
        
        // 转换数据格式为G2Plot需要的格式
        const chartData = this.convertChartData(response.xAxis || [], response.series || [], '销售')
        this.salesChart.changeData(chartData)
      } catch (error) {
        console.error('加载销售趋势数据失败:', error)
        // 使用默认数据
        const defaultData = this.getDefaultChartData(this.salesChartType, '销售')
        this.salesChart.changeData(defaultData)
      }
    },
    
    // 更新购买图表
    async updatePurchaseChart() {
      if (!this.purchaseChart) return
      
      try {
        const response = await getPurchaseTrend({
          type: this.purchaseChartType,
          startDate: this.searchForm.dateRange && this.searchForm.dateRange[0],
          endDate: this.searchForm.dateRange && this.searchForm.dateRange[1]
        })
        
        // 转换数据格式为G2Plot需要的格式
        const chartData = this.convertChartData(response.xAxis || [], response.series || [], '购买')
        this.purchaseChart.changeData(chartData)
      } catch (error) {
        console.error('加载购买趋势数据失败:', error)
        // 使用默认数据
        const defaultData = this.getDefaultChartData(this.purchaseChartType, '购买')
        this.purchaseChart.changeData(defaultData)
      }
    },
    
    // 转换图表数据格式
    convertChartData(xAxis, series, type) {
      return xAxis.map((date, index) => ({
        date: date,
        value: series[index] || 0,
        type: type
      }))
    },
    
    // 获取默认图表数据
    getDefaultChartData(chartType, type) {
      const data = {
        daily: {
          xAxis: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
          series: [1200, 1800, 1500, 2200, 1900, 2500, 2100]
        },
        monthly: {
          xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
          series: [35000, 42000, 38000, 45000, 41000, 48000]
        },
        yearly: {
          xAxis: ['2020', '2021', '2022', '2023', '2024'],
          series: [380000, 420000, 450000, 480000, 520000]
        }
      }
      
      const chartData = data[chartType] || data.daily
      return this.convertChartData(chartData.xAxis, chartData.series, type)
    },
    
    // 加载数据
    async loadData() {
      this.loading = true
      try {
        // 模拟API调用
        await this.loadStats()
        await this.loadRecords()
        this.updateCharts()
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$message.error('加载数据失败')
      } finally {
        this.loading = false
      }
    },
    
    // 加载统计数据
    async loadStats() {
      try {
        const response = await getSalesPurchaseStats({
          startDate: this.searchForm.dateRange && this.searchForm.dateRange[0],
          endDate: this.searchForm.dateRange && this.searchForm.dateRange[1]
        })
        this.stats = {
          totalSales: response.total_sales || 0,
          totalPurchase: response.total_purchase || 0,
          netProfit: response.net_profit || 0,
          totalOrders: response.total_orders || 0,
          salesTrend: response.sales_trend || 0,
          purchaseTrend: response.purchase_trend || 0,
          profitTrend: response.profit_trend || 0,
          orderTrend: response.order_trend || 0
        }
      } catch (error) {
        console.error('加载统计数据失败:', error)
        // 使用默认数据
        this.stats = {
          totalSales: 0,
          totalPurchase: 0,
          netProfit: 0,
          totalOrders: 0,
          salesTrend: 0,
          purchaseTrend: 0,
          profitTrend: 0,
          orderTrend: 0
        }
      }
    },
    
    // 加载记录数据
    async loadRecords() {
      try {
        const params = {
          page: this.pagination.current - 1, // 后端从0开始
          count: this.pagination.size,
          type: this.searchForm.type,
          status: this.searchForm.status,
          keyword: this.searchForm.keyword,
          startDate: this.searchForm.dateRange && this.searchForm.dateRange[0],
          endDate: this.searchForm.dateRange && this.searchForm.dateRange[1],
          sortBy: this.sortBy,
          sortOrder: this.sortOrder
        }
        
        const response = await getSalesPurchaseRecords(params)
        this.records = response.items || []
        this.pagination.total = response.total || 0
      } catch (error) {
        console.error('加载记录数据失败:', error)
        this.records = []
        this.pagination.total = 0
        this.$message.error('加载记录数据失败')
      }
    },
    
    // 更新图表
    updateCharts() {
      this.$nextTick(() => {
        this.updateSalesChart()
        this.updatePurchaseChart()
      })
    },
    
    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadData()
    },
    
    // 重置
    handleReset() {
      this.searchForm = {
        dateRange: [],
        type: '',
        status: '',
        keyword: ''
      }
      this.sortBy = ''
      this.sortOrder = ''
      this.pagination.current = 1
      this.loadData()
    },
    
    // 导出数据
    async handleExport() {
      try {
        const params = {
          type: this.searchForm.type,
          status: this.searchForm.status,
          keyword: this.searchForm.keyword,
          startDate: this.searchForm.dateRange && this.searchForm.dateRange[0],
          endDate: this.searchForm.dateRange && this.searchForm.dateRange[1]
        }
        
        const response = await exportSalesPurchaseStats(params)
        if (response.downloadUrl) {
          // 创建下载链接
          const link = document.createElement('a')
          link.href = response.downloadUrl
          link.download = `销售购买统计_${new Date().toISOString().split('T')[0]}.xlsx`
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
          
          this.$message.success('导出成功')
        } else {
          this.$message.error('导出失败：未获取到下载链接')
        }
      } catch (error) {
        console.error('导出失败:', error)
        this.$message.error('导出失败')
      }
    },
    
    // 刷新
    handleRefresh() {
      this.loadData()
    },
    
    // 查看详情
    handleViewDetail(record) {
      this.selectedRecord = record
      this.detailDialogVisible = true
    },
    
    // 关闭详情对话框
    handleCloseDetail() {
      this.detailDialogVisible = false
      this.selectedRecord = null
    },
    
    // 日期变化
    handleDateChange() {
      this.handleSearch()
    },
    
    // 类型变化
    handleTypeChange() {
      this.handleSearch()
    },
    
    // 状态变化
    handleStatusChange() {
      this.handleSearch()
    },
    
    // 排序变化
    handleSortChange({ column, prop, order }) {
      this.sortBy = prop
      this.sortOrder = order
    },
    
    // 分页大小变化
    handleSizeChange(size) {
      this.pagination.size = size
      this.pagination.current = 1
      this.loadData()
    },
    
    // 当前页变化
    handleCurrentChange(current) {
      this.pagination.current = current
      this.loadData()
    },
    
    // 清除日期筛选
    clearDateFilter() {
      this.searchForm.dateRange = []
      this.handleSearch()
    },
    
    // 清除类型筛选
    clearTypeFilter() {
      this.searchForm.type = ''
      this.handleSearch()
    },
    
    // 清除状态筛选
    clearStatusFilter() {
      this.searchForm.status = ''
      this.handleSearch()
    },
    
    // 清除关键词筛选
    clearKeywordFilter() {
      this.searchForm.keyword = ''
      this.handleSearch()
    },
    
    // 获取类型标签类型
    getTypeTagType(type) {
      const types = {
        sales: 'success',
        purchase: 'warning'
      }
      return types[type] || 'info'
    },
    
    // 获取类型文本
    getTypeText(type) {
      const texts = {
        sales: '销售',
        purchase: '购买'
      }
      return texts[type] || type
    },
    
    // 获取状态标签类型
    getStatusTagType(status) {
      const types = {
        paid: 'success',
        completed: 'success',
        processing: 'primary',
        cancelled: 'danger'
      }
      return types[status] || 'info'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const texts = {
        paid: '已付款',
        completed: '已完成',
        processing: '进行中',
        cancelled: '已取消'
      }
      return texts[status] || status
    },
    
    // 格式化金额
    formatAmount(amount) {
      return Number(amount).toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
    },
    
    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return '-'
      return new Date(dateTime).toLocaleString('zh-CN')
    }
  }
}
</script>

<style lang="scss" scoped>
.sales-purchase-stats-page {
  padding: 20px;
  
  .page-header {
    margin-bottom: 20px;
    
    .page-title {
      font-size: 24px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 8px;
    }
    
    .page-subtitle {
      font-size: 14px;
      color: #909399;
    }
  }
  
  .stats-cards {
    margin-bottom: 20px;
    
    .stats-card {
      .stats-content {
        text-align: center;
        padding: 10px;
        
        .stats-number {
          font-size: 28px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 8px;
        }
        
        .stats-label {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }
        
        .stats-trend {
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          
          &.up {
            color: #67c23a;
          }
          
          &.down {
            color: #f56c6c;
          }
          
          i {
            margin-right: 4px;
          }
        }
      }
    }
  }
  
  .charts-row {
    margin-bottom: 20px;
    
    .chart-card {
      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .chart-container {
        height: 300px;
        
        .chart {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  
  .search-card {
    margin-bottom: 20px;
    
    .search-form {
      margin-bottom: 15px;
    }
    
    .filter-status {
      .el-tag {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }
  }
  
  .table-card {
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      
      .table-title {
        font-size: 16px;
        font-weight: bold;
        
        .record-count {
          font-size: 14px;
          color: #909399;
          font-weight: normal;
        }
      }
    }
    
    .data-table {
      .amount-text {
        font-weight: bold;
        
        &.sales {
          color: #67c23a;
        }
        
        &.purchase {
          color: #f56c6c;
        }
      }
    }
    
    .pagination-container {
      margin-top: 20px;
      text-align: right;
    }
  }
  
  .detail-content {
    .amount-text {
      font-weight: bold;
      
      &.sales {
        color: #67c23a;
      }
      
      &.purchase {
        color: #f56c6c;
      }
    }
  }
}
</style> 